<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="utf-8">
		<title>添加文章</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all" />
		<script>
			<%--JS gloable varilible--%>
			var ctx = "${ctx}";
		</script>
		<style type="text/css">
			.layui-form-item .layui-inline {
				width: 33.333%;
				float: left;
				margin-right: 0;
			}
			
			@media ( max-width :1240px) {
				.layui-form-item .layui-inline {
					width: 100%;
					float: none;
				}
			}
		</style>
	</head>

	<body class="childrenBody">
		<form class="layui-form" style="width: 80%;" id="aaf">
			<div class="layui-form-item" style="margin-top: 10px">
				<label class="layui-form-label">文章标题</label>
				<div class="layui-input-block">
					<input type="text" id="title" class="layui-input" lay-verify="required" placeholder="文章标题" name="title" value="" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 10px">
				<label class="layui-form-label">描述</label>
				<div class="layui-input-block">
					<input type="text" id="description" class="layui-input" lay-verify="required" placeholder="文章描述" name="description" value="" autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 10px">
				<label class="layui-form-label">封面图片</label>
				<button type="button" class="layui-btn" id="uploadImg" style="display: inline-block; vertical-align: top;">上传图片</button>
				<div class="layui-upload-list" style="display: inline-block; vertical-align: top;">
					<!--预览图片-->

					<!--提示上传信息-->
					<p id="demoText"></p>
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 10px">
				<label class="layui-form-label">文章分类</label>
				<div class="layui-input-inline layui-form" style="z-index:9999;">
					<select name="cId" class="" id="cId">
						<option value="-1">请文章分类</option>
						<c:forEach items="${categoryList}" var="item">
							<option value="${item.id}">${item.category}</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 10px">
				<label class="layui-form-label">文章分类</label>
				<div class="layui-input-block">
					<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" type="bottom" lay-submit="" id="addArticle">立即提交</button>
				</div>
			</div>
		</form>
		<script type="text/javascript" charset="utf-8" src="${ctx }/ueditor/ueditor.config.js"></script>
	    <script type="text/javascript" charset="utf-8" src="${ctx }/ueditor/ueditor.all.min.js"> </script>
	    <script type="text/javascript" charset="utf-8" src="${ctx }/ueditor/lang/zh-cn/zh-cn.js"></script>
		<script type="text/javascript" src="${ctx }/layui/layui.js"></script>
		

		<script>
			var $;
			layui.config({
				base: "js/"
			}).use(['form', 'layer', 'jquery', 'upload'], function() {
				var form = layui.form,
					layer = parent.layer === undefined ? layui.layer :
					parent.layer,
					upload = layui.upload,
					layedit = layui.layedit,
					laypage = layui.laypage;
				$ = layui.jquery;
				var uploadInst = upload.render({
					elem: '#uploadImg',
					url: ctx + "/upload/uploadImg",
					done: function(res, input) {
						if(res.code == "0") {
							$(".layui-upload-list").css({
								"width": "100px",
								"height": "100px"
							})
							$(".layui-upload-list")
								.html(
									'<img class="layui-upload-img" id="coversPic" src="' +res.data.src +
									'" style="width:100%;height:100%;margin-top:-10px">');
						}
					},
					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#demoText');
						demoText
							.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on(
							'click',
							function() {
								uploadInst.upload();
							});
					}
				});
				

				$("#addArticle").on("click", function() {
					 var index = top.layer.msg('数据提交中，请稍候', {
						icon: 16,
						time: false,
						shade: 0.8
					});
					var msg;
					console.log($('#title').val());
					console.log($('#description').val());
					console.log($('#coversPic').attr("src"));
					console.log($('#cId').val())
					$.ajax({
						type: "post",
						url: ctx + "/article/insArticle",
						data: {
							title:$('#title').val(),
							description:$('#description').val(),
							coversPic:$('#coversPic').attr("src"),
							content:UE.getEditor('editor').getContent(),
							cId:$('#cId').val()
						},
						dataType: "json",
						success: function(d) {
							 console.log(d)
							if(d.code == 0) {
								msg = "添加成功！";
							} else {
								msg = d.msg;
							}
						}
					});
					setTimeout(function() {
						top.layer.close(index);
						top.layer.msg(msg);
						layer.closeAll("iframe");
						//刷新父页面
						parent.location.reload();
					}, 1000);
					return false;
				});

			})
			
			var ue = UE.getEditor('editor');
			UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;  
			UE.Editor.prototype.getActionUrl = function(action) {  
			    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {  
			        return 'http://localhost:8080/irs/upload/uploadImage';  
			    } else {  
			        return this._bkGetActionUrl.call(this, action);  
			    }  
			};  
			
			
			
			
		</script>
	</body>

</html>